<!-- mallSettlement -->
<template>
  <div class="mallSettlement content_box">
    <div>
      <h4>个人入账配置</h4>
      <div class="headder_setting float_none" v-loading="loading">
        <div
          class="item flex space-between align-center"
          v-for="item of typeOption"
          :key="item.OrderType"
        >
          <div>
            <div class="">
              <span class="tit_span nowarp">入账配置名称：</span>
              <span class="tit_span nowarp">{{ item.Desction }}</span>
            </div>
          </div>
          <div class="flex align-center sortInput">
            <span class="tit_span nowarp m-r-1">入账结算类型：</span>
            <el-select v-model="item.SType" placeholder="请选择">
              <el-option
                v-for="item in SettlementType"
                :key="item.EnumName"
                :label="item.Desction"
                :value="item.EnumName"
              >
              </el-option>
            </el-select>
          </div>

          <div class="flex align-center">
            <span class="tit_span nowarp">入账天数：</span>
            <el-input type="number" v-model="item.Days">
              <template slot="prepend" v-if="item.SType == 'DailySettlement'"
                >T</template
              >
              <template slot="prepend" v-else>次月</template>
              <template slot="append">{{
                item.SType == "DailySettlement"
                  ? "天"
                  : item.SType == "MonthlyStatement"
                  ? "号"
                  : "-"
              }}</template>
            </el-input>
          </div>
        </div>
        <el-button class="float_right" type="primary" @click="save(false)" v-if="hasBtn('accountSetting:save')"
          >保存设置</el-button
        >
      </div>      
    </div>
<div>
      <h4>团队入账配置</h4>
      <div class="headder_setting float_none" v-loading="loading">
        <div
          class="item flex space-between align-center"
          v-for="item of teamtypeOption"
          :key="item.OrderType"
        >
          <div>
            <div class="">
              <span class="tit_span nowarp">入账配置名称：</span>
              <span class="tit_span nowarp">{{ item.Desction }}</span>
            </div>
          </div>
          <div class="flex align-center sortInput">
            <span class="tit_span nowarp m-r-1">入账结算类型：</span>
            <el-select v-model="item.SType" placeholder="请选择" >
              <el-option
                v-for="item in SettlementType"
                :key="item.EnumName"
                :label="item.Desction"
                :value="item.EnumName"
              >
              </el-option>
            </el-select>
          </div>

          <div class="flex align-center">
            <span class="tit_span nowarp">入账天数：</span>
            <el-input type="number" v-model="item.Days">
              <template slot="prepend" v-if="item.SType == 'DailySettlement'"
                >T</template
              >
              <template slot="prepend" v-else>次月</template>
              <template slot="append">{{
                item.SType == "DailySettlement"
                  ? "天"
                  : item.SType == "MonthlyStatement"
                  ? "号"
                  : "-"
              }}</template>
            </el-input>
          </div>
        </div>
        <el-button class="float_right" type="primary" @click="save(true)" v-if="hasBtn('accountSetting:save')"
          >保存设置</el-button
        >
      </div>      
    </div>
  </div>
</template>

<script>
import { GetManageType } from '@/api/system/manage-cost'
import { Save, GetList, GetSettlementType, } from '@/api/system/account-setting'
// import { GetOrderType } from '@/api/system/share-manage'
export default {
  //import引入的组件需要注入到对象中才能使用
  name: 'mallSettlement',
  components: {},
  data () {
    //这里存放数据
    return {
      setting: {},
      typeOption: [],
      teamtypeOption:[
         { OrderType: 'ActivateAward', Desction: '激活奖励', Days: 0, SType: '', Id: '00000000-0000-0000-0000-000000000000' },
         { OrderType: 'PromotionAward', Desction: '推广奖励', Days: 0, SType: '', Id: '00000000-0000-0000-0000-000000000000' },
         { OrderType: 'StandardAward', Desction: '达标奖励', Days: 0, SType: '', Id: '00000000-0000-0000-0000-000000000000' },
      ],
      loading: false,
      SettlementType: []
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.GetSettlementTypeFun()
    this.getSetting(true)
    this.GetOrderTypeFun().then(_ => {
      this.getSetting(false)
    })
  },
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
  //方法集合
  methods: {
    GetSettlementTypeFun () {

      GetSettlementType({}).then(res => {
        this.SettlementType = res.Data
      })
    },
    GetOrderTypeFun () {
      return new Promise((next) => {
        this.loading = true
        GetManageType({}).then(res => {
          // console.log(res)
          this.typeOption = res.Data.map(item => {
            return { OrderType: item.EnumName, Desction: item.Desction, Days: 0, SType: '', Id: '00000000-0000-0000-0000-000000000000' }
          })
          next()
        })
      })
    },
    async getSetting (IsTeam) {
      const { Data } = await GetList({IsTeam})
      this.loading = false
      let options = this.$deepClone(this.typeOption)
      if(IsTeam == 1){ //团队是1   个人是0
        options = this.$deepClone(this.teamtypeOption)
        this.teamtypeOption = options.map(item => {
        for (let cell of Data) {
          if (cell.Rname == item.OrderType) {
            item.Days = cell.Days
            item.Id = cell.Id
            item.SType = cell.Stype
          }
        }
        return { ...item }
      })
      }else{
        this.typeOption = options.map(item => {
          for (let cell of Data) {
            if (cell.Rname == item.OrderType) {
              item.Days = cell.Days
              item.Id = cell.Id
              item.SType = cell.Stype
            }
          }
          return { ...item }
        })
      }

      // this.setting = Data || { Id: '00000000-0000-0000-0000-000000000000' }
    },
    save (IsTeam) {
      console.log(IsTeam)
      let list = []
      if(IsTeam ==1){
        list = this.teamtypeOption.map(item => {
          return { Id: item.Id, RName: item.OrderType, Days: item.Days, SType: item.SType ,IsTeam}
        })
      }else{
        list = this.typeOption.map(item => {
          return { Id: item.Id, RName: item.OrderType, Days: item.Days, SType: item.SType ,IsTeam}
        })
      }


      Save(list).then(() => {
        this.$notify({
          title: '操作成功',
          message: 'success',
          type: 'success',
          duration: 2000
        })
        this.getSetting(IsTeam)
      })
    }
  },
}
</script>
//@import url(); 引入公共css类
<style  scoped>
.mallSettlement{
  display: flex;
  flex-wrap: wrap;
}
.mallSettlement >>>  .el-input-group__prepend{
  padding: 0 10px;
}
.mallSettlement>div{
  width:46%;
  margin-right:60px
}
.headder_setting {
  width: 100%;
  min-width: 700px;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 0 5px 3px #ececec;
  padding: 10px;
}
.item {
  margin-bottom: 20px;
}
.item > div {
  width: 33%;
  box-sizing: border-box;
}

.item > div:nth-child(2) {
  margin-right: 20px;
}
.item > div:nth-child(3) {
  width:41%
}
.headder_setting .tit_span {
  /* width: 80px; */
  font-size: 0.9rem;
}
.orderReview_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mallSettlement >>> .el-col {
  line-height: 40px;
}
.sortInput >>> .el-input__inner{
  width: 95px;
}
</style>
